<template>
  <el-drawer
      :model-value="store.drawer"
      direction="rtl"
      :before-close="store.toggleDrawer"
      destroy-on-close
  >
    <template #header>
      <div class="left">
        {{ type }}学员
      </div>
    </template>
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="store.studentInfo"
        status-icon
        :rules="rules"
        label-width="30%"
        scroll-to-error
        scroll-into-view-options
        v-loading="store.studentDrawerLoading"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="store.studentInfo.name" autocomplete="off" minlength="2" maxlength="11"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex" >
        <el-radio-group v-model="store.studentInfo.sex">
          <el-radio v-for="(value, key) in SEX" :value="parseInt(key)" :label="key">{{value}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="班级" prop="class_id">
        <el-select v-model="store.studentInfo.class_id" placeholder="请选择学员所属班级">
          <el-option v-for="item in classStore.allClassList" :key="item.id" :label="item.class_name" :value="parseInt(item.id)" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否班长" prop="is_monitor" >
        <el-radio-group v-model="store.studentInfo.is_monitor">
          <el-radio :value="parseInt('1')" label="是" />
          <el-radio :value="parseInt('0')" label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="age">
        <el-date-picker
            v-model="store.studentInfo.age"
            type="date"
            placeholder="请选择入职时间"
            format="YYYY/MM/DD"
            value-format="YYYYMMDD"
        />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model.number="store.studentInfo.phone" utocomplete="off" maxlength="11"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="store.studentInfo.email"/>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <AreaSelect v-model:model-value="store.studentInfo.address"/>
      </el-form-item>
      <el-form-item label="毕业院校" prop="school">
        <el-input v-model="store.studentInfo.school"/>
      </el-form-item>
      <el-form-item label="院校类型" prop="school_type">
        <el-select v-model="store.studentInfo.school_type" placeholder="请选择院校类型">
          <el-option v-for="(value, key) in sysStore.SCHOOL_TYPE" key={{key}} :label="value" :value="parseInt(key)" />
        </el-select>
      </el-form-item>
      <el-form-item label="专业" prop="major">
        <el-input v-model="store.studentInfo.major"/>
      </el-form-item>
      <el-form-item label="毕业时间" prop="graduation_date">
        <el-date-picker
            v-model="store.studentInfo.graduation_date"
            type="date"
            placeholder="请选择毕业时间"
            format="YYYY/MM/DD"
            value-format="YYYYMMDD"
        />
      </el-form-item>
      <el-form-item label="是否有毕业证" prop="has_graduation_cert">
        <el-radio-group v-model="store.studentInfo.has_graduation_cert">
          <el-radio :value="true" label="是" />
          <el-radio :value="false" label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="store.studentInfo.status" placeholder="请选择学员状态">
          <el-option v-for="(value, key) in sysStore.STUDENT_STATUS" key={{key}} :label="value" :value="parseInt(key)" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系人电话" prop="contact_person_phone">
        <el-input v-model.number="store.studentInfo.contact_person_phone" utocomplete="off" maxlength="11"/>
      </el-form-item>
      <el-form-item label="所属销售" prop="sale_id">
        <el-select v-model="store.studentInfo.sale_id" placeholder="请选择所属销售">
          <el-option v-for="item in employeeStore.saleList" :key="item.id" :label="item.name" :value="parseInt(item.id)" />
        </el-select>
      </el-form-item>
      <el-form-item label="推荐人" prop="referrer">
        <el-input v-model.number="store.studentInfo.referrer"/>
      </el-form-item>
      <el-form-item label="付费方式" prop="pay_type">
        <el-select v-model="store.studentInfo.pay_type" placeholder="请选择付费方式">
          <el-option v-for="(value, key) in sysStore.PAY_TYPE" key={{key}} :label="value" :value="parseInt(key)" />
        </el-select>
      </el-form-item>
      <el-form-item label="付款金额" prop="pay_amount">
        <el-input-number v-model.number="store.studentInfo.pay_amount"/>
      </el-form-item>
      <el-form-item label="贷款金额" prop="loan_amount">
        <el-input-number v-model.number="store.studentInfo.loan_amount"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import {onMounted, reactive, ref, toRaw} from "vue";
import {DRAWER_TYPE} from "@/dict/dict-student";
import {SEX} from "@/dict/dict-sys";
import {useSysDictStore} from "@/store/store-sys-dict-pinia";
import {useStudentStore} from "@/store/student";
import {useClassManagerStore} from "@/store/store-class-manager-pinia";
import {useEmployeeStore} from "@/store/employee";
import {validateEmail, validatePhone} from "@/utils/validator";
import AreaSelect from "@/components/common/AreaSelect.vue";


const props = defineProps({
  type: {
    type: String,
    validator: (value) => Object.values(DRAWER_TYPE).includes(value)
  },
  data: Object
})


const store = useStudentStore();
const sysStore = useSysDictStore()
const classStore = useClassManagerStore()
const employeeStore = useEmployeeStore();
const ruleFormRef = ref()

onMounted(()=>{
  classStore.getAllClass();
  employeeStore.getAllSales();
})

const rules = reactive({
  name: [{ required: true, message: '姓名不能为空', trigger: ['blur']}],
  sex: [{ required: true, message: '请选择性别', trigger: 'blur'}],
  class_id: [{ required: true, message: '请选择班级', trigger: 'blur'}],
  is_monitor: [{ required: true, message: '请选择是否班长', trigger: 'blur'}],
  age: [{ required: true, message: '请选择出生日期', trigger: 'blur'}],
  phone: [{ required: true, trigger: 'blur', validator: validatePhone}],
  email: [{ required: true, trigger: 'blur', validator: validateEmail}],
  school: [{ required: true, message: '请填写毕业院校', trigger: 'blur'}],
  school_type: [{ required: true, message: '请选择院校类型', trigger: 'blur'}],
  major: [{ required: true, message: '请填写专业', trigger: 'blur'}],
  graduation_date: [{ required: true, message: '请选择毕业时间', trigger: 'blur'}],
  has_graduation_cert: [{ required: true, message: '请选择是否取得毕业证', trigger: 'blur'}],
  status: [{ required: true, message: '请选择学员状态', trigger: 'blur'}],
  contact_person_phone: [{ required: false, trigger: 'blur'}],
  sale_id: [{ required: true, message: '请选择销售人员', trigger: 'blur'}],
  pay_type: [{ required: true, message: '请选择付费方式', trigger: 'blur'}],
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(!store.studentInfo.pay_amount){
        store.studentInfo.pay_amount = 0
      }

      if(!store.studentInfo.loan_amount){
        store.studentInfo.loan_amount = 0
      }
      store.studentInfo.phone = store.studentInfo.phone.toString()
      if(store.studentInfo.contact_person_phone){
        store.studentInfo.contact_person_phone = store.studentInfo.contact_person_phone.toString()
      }

      store.studentInfo.address =  JSON.stringify({
        'province':store.studentInfo.address.province, 'city':store.studentInfo.address.city
      })

      if(props.type === DRAWER_TYPE.add){
        store.addStudent(store.studentInfo)
      }else{
        store.modStudent(store.studentInfo)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  store.toggleDrawer()
}
</script>

<style scoped lang="less">
.left {
  text-align: left; /* 设置标题左对齐 */
}

.van-cell {
  --van-cell-vertical-padding: 0;
  --van-cell-border-color: var(--el-border-color);
  --van-cell-label-line-height: var(--el-component-size);
  --van-cell-line-height: var(--el-component-size);
  --van-cell-text-color: var(--el-text-color-placeholder);;
  --van-cell-font-size: var(--el-font-size-base);
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  text-align: start;
}

.van-popup {
  position: absolute;
  top:0;
  width: 100%;
}

</style>